<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
	<title>表格</title>
	<link rel="stylesheet" type="text/css" href="css/table.css">
	<link rel="stylesheet" type="text/css" href="css/iconfont.css">
</head>
<body>

<table border="1";>
	<!--表头-->
	<thead>
		<tr class="header">
			<th colspan="5">采购清单</th>
		</tr>
		<tr>
			<th>序号</th>
			<th>商品名称</th>
			<th>单价</th>
			<th>数量</th>
			<th>操作</th>
		</tr>
	</thead>
    
    <!--表体-->
	<tbody>
		<tr>
			<td>1</td>
			<td>笔记本</td>
			<td>2.5</td>
			<td>2</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>

		<tr>
			<td>2</td>
			<td>笔记本</td>
			<td>2.5</td>
			<td>2</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>

		<tr>
			<td>3</td>
			<td>笔记本</td>
			<td>2.5</td>
			<td>2</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>

		<tr>
			<td>4</td>
			<td>笔记本</td>
			<td>2.5</td>
			<td>2</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>

		<tr>
			<td>5</td>
			<td>笔记本</td>
			<td>2.5</td>
			<td>2</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>

		<tr>
			<td>6</td>
			<td>笔记本</td>
			<td>2.5</td>
			<td>2</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>

		<tr>
			<td>7</td>
			<td>笔记本</td>
			<td>2.5</td>
			<td>2</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>
		<tr>
			<td colspan="5">
				<p style="text-align: right;">总计</p>
			</td>
		</tr>


	</tbody>

	<div class="shade" style="display: none;">
		<div class="form-wrap">
			<h5 class="form-header">添加商品</h5>
			<div class="addform">
				<input name="goods" type="text" value="" placeholder="请输入商品名称"><br>
				<input name="price" type="text" value="" placeholder="请输入商品单价"><br>
				<input name="num" type="text" value="" placeholder="请输入商品数量"><br>
				<div class="addoption">
				<button id="addBtn">确定</button>
				<button id="missBtn">取消</button>
				</div>
			</div>
			<div class="cha">
				<span class="iconfont icon-guanbi" style="color: #fff;"></span>
			</div>
		</div>
	</div>
<script type="text/javascript" src="js/jquery.js"></script>


<script type="text/javascript">
	$('tbody tr:odd').addClass('odd');

    /**添加列表**/
	$('.addItem').click(function(){
		$('.shade').show();
	});

    /*删除行（即点击删除按钮，按钮所在行的内容随之消失）*/
	$('.delItem').click(function(){
		$(this).parent().parent().remove();
        /**调整一下奇偶的样式**/
		$('tbody tr').removeClass();
		$('tbody tr:odd').addClass('odd');

	for(var i=0;i<$('tbody tr').length-1;i++){
		$('tbody tr:eq(' +i+')').find('td:first').text(i+1);
	}

	});

	var hideForm=function(btn){
		$(btn).parent().parent().remove();
	};

	/*取消按钮（即点击取消按钮后，关闭弹窗）*/ 
	$('#missBtn').click(function(){
	    $('.shade').hide();
	});

	

	/*为后面添加的内容设置与原有内容相同的添加按钮事件*/
	var showForm=function(){
		$('.shade').show();
	};

    /*添加按钮的实现，点击添加按钮，弹出窗口*/
	$('#addBtn').click(function(){
		var goodsname=$('input[name=goods]').val();
		var price=$('input[name=price]').val();
		var num=$('input[name=num]').val();

		/*清空输入框*/
		$('input[name=goods]').val('');
		$('input[name=price]').val('');
		$('input[name=num]').val('');



		var ntr=$('tbody tr').length;
		var sn=$('tbody tr:eq('+(ntr-2)+')').find('td:first').text();

		/*把表单的值追加到表格的指定位置*/
		var tr='<tr><td>'+(sn*1+1)+'</td><td>'+goodsname+'</td><td>'+price+'</td><td>'+num+'</td><td><button onclick="hideForm(this)">删除</button>\
		<button onclick="showForm()">添加</button></td></tr>';

		$('tbody tr:eq('+(ntr-2)+')').after(tr);


		

		/*隐藏表单的输入框*/
		$('.shade').hide();
        /*控制台输出输入框输入的内容*/
		console.log(goodsname+'--'+price+'--'+num);
	});

	/*弹窗关闭按钮的实现*/
	$('.cha').click(function(){
		$('.shade').hide();
	});

</script>

</table>
</body>
</html>